<!DOCTYPE html>
<html>
  <head>
    <title>Test Status Detection</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .test-section {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }
      .status-element {
        margin: 10px 0;
        padding: 10px;
        background: #f0f0f0;
        border-radius: 3px;
      }
      button {
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
      }
      .result {
        background: #e8f5e8;
        padding: 10px;
        margin: 10px 0;
        border-radius: 3px;
      }
    </style>
  </head>
  <body>
    <h1>🧪 Test Status Detection</h1>

    <div class="test-section">
      <h3>Simulated Cursor Dashboard Elements</h3>

      <!-- Pro Trial - actual element from cursor.com (Version 1) -->
      <div class="status-element">
        <strong>Pro Trial Element v1 (P tag only):</strong>
        <p
          class="[&_b]:md:font-semibold [&_strong]:md:font-semibold flex-shrink-0 text-sm text-brand-gray-300"
        >
          Pro Trial
        </p>
      </div>

      <!-- Pro Trial - actual element from cursor.com (Version 2 with div title) -->
      <div class="status-element">
        <strong>Pro Trial Element v2 (Div with title):</strong>
        <div class="flex min-w-0 items-center gap-1" title="Pro Trial">
          <p
            class="[&_b]:md:font-semibold [&_strong]:md:font-semibold flex-shrink-0 text-sm text-brand-gray-300"
          >
            Pro Trial
          </p>
        </div>
      </div>

      <!-- Free Plan -->
      <div class="status-element">
        <strong>Free Plan Element:</strong>
        <p class="flex-shrink-0 text-sm text-brand-gray-300">Free Plan</p>
      </div>

      <!-- Pro Plan -->
      <div class="status-element">
        <strong>Pro Plan Element:</strong>
        <p class="flex-shrink-0 text-sm text-brand-gray-300">Pro Plan</p>
      </div>

      <!-- Business Plan -->
      <div class="status-element">
        <strong>Business Plan Element:</strong>
        <p class="flex-shrink-0 text-sm text-brand-gray-300">Business Plan</p>
      </div>

      <button onclick="testStatusDetection()">Test Status Detection</button>

      <div id="testResults" class="result" style="display: none"></div>
    </div>

    <script>
      function testStatusDetection() {
        console.log("🧪 Testing Status Detection...");

        // This is the same logic from background.js getAccountInfo
        let status = "unknown";

        // Find status - enhanced selectors for better detection
        const statusSelectors = [
          // New complex class selector for Pro Trial
          'p[class*="flex-shrink-0"][class*="text-sm"][class*="text-brand-gray-300"]',
          // Specific selector for div with title Pro Trial
          'div[title="Pro Trial"] p',
          'div[title*="Trial"] p',
          'div[title*="Free"] p',
          'div[title*="Pro"] p',
          'div[title*="Business"] p',
          // Direct title attribute selectors
          'div[title="Pro Trial"]',
          'div[title="Free Plan"]',
          'div[title="Pro Plan"]',
          'div[title="Business Plan"]',
          // Original selectors
          "p.flex-shrink-0.text-sm.text-brand-gray-300",
          '[class*="text-brand-gray-300"]',
          'div[title*="Plan"] p',
          'div[title*="plan"] p',
          "div.flex.min-w-0.items-center.gap-1 p",
          // Specific class combination selectors
          'div.flex.min-w-0.items-center.gap-1[title*="Trial"] p',
          'div.flex.min-w-0.items-center.gap-1[title*="Free"] p',
          'div.flex.min-w-0.items-center.gap-1[title*="Pro"] p',
          // Additional selectors for various layouts
          'span[class*="text-brand-gray-300"]',
        ];

        let foundElement = null;
        let foundText = "";

        for (const selector of statusSelectors) {
          const statusEls = document.querySelectorAll(selector);

          for (const el of statusEls) {
            const text = el.textContent.trim().toLowerCase();
            const title = el.getAttribute("title") || "";
            const titleLower = title.toLowerCase();

            if (text || title) {
              console.log(
                `Found status element with selector "${selector}", text: "${text}", title: "${title}"`
              );
              foundElement = el;
              foundText = text || title;

              // Check title attribute first (more reliable)
              if (
                titleLower.includes("pro trial") ||
                titleLower === "pro trial"
              ) {
                status = "pro trial";
                break;
              } else if (titleLower.includes("free")) {
                status = "free";
                break;
              } else if (
                titleLower.includes("pro plan") ||
                titleLower === "pro plan"
              ) {
                status = "pro plan";
                break;
              } else if (titleLower.includes("business")) {
                status = "business";
                break;
              }

              // Then check text content
              else if (text.includes("free")) {
                status = "free";
                break;
              } else if (text.includes("pro trial") || text.includes("trial")) {
                status = "pro trial";
                break;
              } else if (text.includes("pro")) {
                status = "pro plan";
                break;
              } else if (text.includes("business")) {
                status = "business";
                break;
              }
            }
          }
          if (status !== "unknown") break;
        }

        // Additional fallback: search all text containing status keywords
        if (status === "unknown") {
          const allTextElements = document.querySelectorAll("p, span, div");
          for (const el of allTextElements) {
            const text = el.textContent.trim().toLowerCase();
            if (
              text === "pro trial" ||
              text === "free plan" ||
              text === "pro plan" ||
              text === "business plan"
            ) {
              console.log(`Found status in fallback: "${text}"`);
              foundElement = el;
              foundText = text;

              if (text.includes("free")) {
                status = "free";
                break;
              } else if (text.includes("pro trial") || text === "pro trial") {
                status = "pro trial";
                break;
              } else if (text.includes("pro")) {
                status = "pro plan";
                break;
              } else if (text.includes("business")) {
                status = "business";
                break;
              }
            }
          }
        }

        // Display results
        const resultsDiv = document.getElementById("testResults");
        resultsDiv.style.display = "block";

        let html = `<h4>Detection Results:</h4>`;
        html += `<p><strong>Detected Status:</strong> ${status}</p>`;
        html += `<p><strong>Found Text:</strong> "${foundText}"</p>`;
        html += `<p><strong>Element:</strong> ${
          foundElement ? foundElement.outerHTML : "Not found"
        }</p>`;

        if (foundElement) {
          html += `<p><strong>Element Classes:</strong> ${foundElement.className}</p>`;
          html += `<p><strong>Element Title:</strong> ${
            foundElement.getAttribute("title") || "No title"
          }</p>`;
          foundElement.style.border = "2px solid red";
          setTimeout(() => {
            foundElement.style.border = "";
          }, 3000);
        }

        resultsDiv.innerHTML = html;
      }
    </script>
  </body>
</html>
